<template>
	<view class="pagebox flex-column pd30" v-if="obj.u">
		<view v-if="obj.u.type=='user'" class="fab-box flex-center" @tap="goadd">
			<view class="line1"></view><view class="line2"></view>
		</view>
		<template v-if="obj.u.type=='user'">
			<view class="listitem flex-row" v-for="(v,i) in obj.files" :key="i">
				<view class="imgbox"><image class="img" :src="v.realfilename" mode="aspectFill" @click="proxy.$c.previewImages(obj.imgs,i)"></image></view>
				<view class="flex-column">
					<view class="desc mb5"><text class="gray-color">创建时间：</text>{{v.intime}}</view>
					<view class="desc mb5" v-if="v.verify==1"><text class="gray-color">已退回：</text>{{v.verify_msg}}</view>
					<view class="desc mb5" v-if="v.verify==1"><text class="gray-color">退回时间：</text>{{v.verify_time}}</view>
					<view class="w100 flex-row ju-between">
						<view class="minibtn base-bg flex-center" @click="proxy.$c.previewImages(obj.imgs,i)">查看</view>
						<view v-if="v.verify==1" class="minibtn danger-bg flex-center" @click="edit(v)">修改</view>
						<view class="minibtn danger-bg flex-center" @click="del(v,i)">删除</view>
					</view>
				</view>
			</view>
		</template>
		
		<template v-if="obj.u.type=='mana'">
			<view class="listitem flex-row" v-for="(v,i) in obj.files" :key="i">
				<view class="imgbox"><image class="img" :src="v.realfilename" mode="aspectFill" @click="proxy.$c.previewImages(obj.imgs,i)"></image></view>
				<view class="flex-column">
					<view class="desc mb5"><text class="gray-color">添加人：</text>{{v.name}}</view>
					<view class="desc mb5"><text class="gray-color">创建时间：</text>{{v.intime}}</view>
					<view class="desc mb5" v-if="v.verify==1"><text class="gray-color">已退回：</text>{{v.verify_msg}}</view>
					<view class="desc mb5" v-if="v.verify==1"><text class="gray-color">退回时间：</text>{{v.verify_time}}</view>
					<view class="w100 flex-row ju-between">
						<view class="minibtn base-bg flex-center" @click="proxy.$c.previewImages(obj.imgs,i)">查看</view>
						<view v-if="v.verify==0" class="minibtn warning-bg flex-center" @click="showback(v)">退回</view>
						<view class="minibtn danger-bg flex-center" @click="del(v,i)">删除</view>
					</view>
				</view>
			</view>
		</template>
		<view v-if="!obj.files.length" class="nodata flex-center">--暂无数据--</view>
		
		
		
		
		<view v-if="obj.showback" class="editpass flex-center" @click="obj.showback = false">
			<view class="card pd30 flex-column-center" @click.stop="()=>{}">
				<view class="w100 flex-row ju-between mb40">
					<text class="title">退回</text>
					<image @click="obj.showback = false" class="cancel" src="../static/9.png" mode="aspectFill"></image>
				</view>
				<div class="inputbox flex-row-center mb20">
					<input class="input flex1 ml30 flex-row-center" type="text" maxlength="30" placeholder="请输入退回理由" placeholder-style="color:#c7c8c9;font-size:22rpx;" v-model="obj.f.msg"/>
				</div>
				<view class="w100 flex-row-center">
					<button class="button linebtn mr20" @click.stop="obj.showback = false">取消</button>
					<button class="button base-bg w-color" :disabled="obj.disabled" @click.stop="submitBack">确认退回</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
    import { reactive, getCurrentInstance,onMounted,watch,computed,nextTick } from 'vue'
	import { onLoad,onShow,onTabItemTap,onReachBottom,onPullDownRefresh,onPageScroll } from '@dcloudio/uni-app';
	import dayjs from 'dayjs'
    let { proxy } = getCurrentInstance()
	let obj = reactive({
		query: {},
		files: [],
		imgs: [],
		u: null,
		showback: false,
		disabled: false,
		f: {
		  "msg": "",
		  "file_id": "",
		  "project_id": ""
		},
	})
	
	onLoad((opt)=>{
		obj.query = opt
		uni.setNavigationBarTitle({
			title: opt.filepath.split(/\,(?=[^\,]+$)/)[1]
		});
	})
	
	onShow(()=>{
		obj.u = uni.getStorageSync('user')?JSON.parse(uni.getStorageSync('user')):null
		if(obj.u){
			getfiles()
		}else{
			uni.reLaunch({
				url: '/pages/login'
			})
		}
	})
	
	const getfiles=()=>{
		proxy.$reQuest.post(obj.u.type==='user'?'mp/project/files':'manager/project/files',{project_id: obj.query.project_id,filepath:obj.query.filepath},{token:true}).then(res=>{
			obj.imgs = []
			if(res.success){
				if(obj.u.type==='user'){
					obj.files = res.msg.list.filter(e=>e.filepath===obj.query.filepath&&e.realfilename)
				}else{
					obj.files = res.msg.list||[]
				}
				obj.files.map(e=>{
					e.realfilename = `${proxy.$c.serverHost}images/${e.realfilename}`
					obj.imgs.push(e.realfilename)
				})
			}else{}
		}).catch(err=>{})
	}
	
	const goadd=()=>{
		proxy.$c.go_url(`/pages/addPhoto${proxy.$c.JSONToUrl(obj.query)}`)
	}
	
	const showback=(v)=>{
		obj.f.file_id = v.file_id
		obj.f.project_id = obj.query.project_id
		obj.showback = true
	}
	
	const submitBack=()=>{
		if(!obj.f.msg){
			proxy.$c.Toast('请输入退回理由！')
			return
		}
		obj.disabled = true
		proxy.$reQuest.post('manager/project/back',obj.f,{token: true},).then(res=>{
			if(res.success){
				proxy.$c.Toast('退回成功！')
				obj.showback = false
				getfiles()
			}else{
				obj.disabled = false
				proxy.$c.Toast(res.err);
			}
		}).catch(err=>{obj.disabled = false})
	}
	
	const edit=(v)=>{
		proxy.$c.go_url(`/pages/addPhoto${proxy.$c.JSONToUrl({
			...obj.query,
			"file_id": v.file_id,
			"filepath": v.filepath,
			"realfilename": v.realfilename,
			"filename": v.filename,
			"rname": v.rname,
			"situation": v.situation,
			"caption": v.caption,
			"location": v.location,
			"role": v.role,
			"roletitle": v.title,
			"rolejson": JSON.stringify(v.filerole||{})
		})}`)
	}
	
	const del=(v,i)=>{
		uni.showModal({
			title: '温馨提示',
			content: '确定要删除该照片吗？',
			success: (res)=>{
				if (res.confirm) {
					proxy.$reQuest.post('mp/project/deletefile',{
						file_id: v.file_id,
						project_id: obj.query.project_id
					},{token:true}).then(res=>{
						if(res.success){
							obj.files.splice(i,1)
							proxy.$c.Toast('删除成功！')
						}else{
							proxy.$c.Toast(res.err||'删除失败！')
						}
					}).catch(err=>{
						proxy.$c.Toast(err||'删除失败')
					})	
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}
</script>

<style lang="scss">
.pagebox{
	width: 100vw;height: 100vh;overflow-y: auto;
	.fab-box{
		position: fixed; right: 50rpx; bottom: 90rpx; z-index: 1;
		width: 100rpx; height: 100rpx; border-radius: 90rpx; background: #e9f3fd; box-shadow: 10rpx 10rpx 16rpx 16rpx rgba(209,232,254,0.3);
		border: solid 1rpx #d2e3f5; box-sizing: border-box;
		.line1{
			width: 50rpx; height: 8rpx; border-radius: 8rpx; background: #0583FE;
			position: absolute; left: 50%; margin-left: -25rpx; top: 50%; margin-top: -4rpx;
		}
		.line2{
			width: 8rpx; height: 50rpx; border-radius: 8rpx; background: #0583FE;
			position: absolute; left: 50%; margin-left: -4rpx; top: 50%; margin-top: -25rpx;
		}
	}
	.item{
		position: relative;
		width: 335rpx;min-height: 335rpx;border-radius: 10rpx;overflow: hidden;background: #f0f0f0;
		margin-bottom: 20rpx;margin-right: 20rpx;
		.imgbox{width: 335rpx;height: 335rpx;overflow: hidden;}
		.content{.desc{font-size: 24rpx;}}
		.descicon{
			position: absolute;right: 10rpx;top: 10rpx;z-index: 1;width: 40rpx;height: 40rpx;
		}
	}
	.item:nth-child(2n){margin-right: 0 !important;}
	.add{
		.addicon{width: 100rpx;height: 100rpx;margin-bottom: 10rpx;}
		font-size: 26rpx; color: #666;
	}
	.listitem{
		padding: 30rpx 0;box-sizing: border-box;border-bottom: solid 1rpx #f0f0f0;
		.imgbox{width: 200rpx;height: 200rpx;margin-right: 20rpx;.img{width: 200rpx;height: 200rpx;}}
		.desc{font-size: 26rpx;}
		.minibtn{width: 120rpx;height: 50rpx;border-radius: 10rpx;font-size: 24rpx;color: #fff;margin-top: 10rpx;}
	}
	
	.editpass{
		position: fixed;width: 100vw;height: 100vh;background: rgba(0,0,0,0.6);border-radius: 10rpx;padding: 50rpx;box-sizing: border-box;z-index: 99999999;
		left: 0;top: 0;
		.card{
			width: 100%;height: auto;border-radius: 10rpx;background: #fff;margin-bottom: 30rpx;
			.protitle{font-size: 32rpx;font-weight: bold;}
			.dept{font-size: 24rpx;color: #999;}
		}
		.title{font-size: 32rpx;}
		.cancel{width: 40rpx;height: 40rpx;}
		.button{
			width: 60%;height: 100rpx;border-radius: 100rpx;text-align: center;line-height: 100rpx;font-size: 26rpx;
		}
		.linebtn{background: #f0f0f0;color: #666;width: 40%;}
		.inputbox{
			width: 100%;height: 100rpx;border-radius: 100rpx;background: #f0f0f0;font-size: 26rpx;
		}
	}
	.nodata{flex: 1;width: 100%;font-size: 22rpx;color: #999;}
}
</style>
